import React from 'react';

import styles from './index.less';

/**
 * 员工姓名组件
 * 姓名长度100px， 姓名与别的元素6px的留白，
 * 详见：https://codesign.qq.com/s/zKaDZdELXnj2GPL 访问密码：TTDS,
 * @param { String | ReactNode } name 姓名
 * @param { String | ReactNode } left 姓名左边元素
 * @param { String | ReactNode } right 姓名左边元素
 * @param otherProp 其余属性
 * @returns {JSX.Element}
 * @constructor
 */
const EmployeeNameWrapper = ({ name, left, right, ...otherProp }) => (
    <div className={styles.usernameBox} {...otherProp}>
        {left}
        <span className={styles.username} title={ typeof name === 'string' ? name : null}>
            {name}
        </span>
        {right}
    </div>
);

EmployeeNameWrapper.defaultProps = {
    left: null,
    right: null
};

EmployeeNameWrapper.displayName = 'EmployeeNameWrapper';

export default EmployeeNameWrapper;
